<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米</title>
		<style type="text/css">
			/* 1、把a转换为块级元素 */
			a {
				display: block;
				width: 200px;  /* 这里盒子大小230px*40 */
				height: 40px;
				background-color: #55585a;
				font-size: 16px;
				color: #FFF;
				text-decoration: none;
				/* text-indent: 2em; */
				padding-left: 30px;
				/* 让文字的行高等于盒子的行高，实现文字的垂直居中效果 */
				line-height: 40px;
			}

			/* 2、鼠标经过文字变换背景颜色 */
			a:hover {
				background-color: #ff6700;
			}
		</style>
	</head>
	<body>
		<a href="#">手机 电话卡</a>
		<a href="#">电视 盒子</a>
		<a href="#">笔记本 平板</a>
		<a href="#">出行 穿戴</a>
		<a href="#">智能 路由器</a>
		<a href="#">健康 儿童</a>
		<a href="#">耳机 音响</a>
	</body>
</html>
